<template>
  <div class="whole">
    <div class="head">
      <van-nav-bar
        class="head"
        title="关于零食"
        left-text=""
        left-arrow
        @click-left="click"
      />
    </div>
    <van-grid>
      <van-grid-item>
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.yzcdn.cn%2Fupload_files%2F2016%2F05%2F07%2F146258897889374831.gif%3FimageView2%2F2%2Fw%2F580%2Fh%2F580%2Fq%2F75%2Fformat%2Fgif&refer=http%3A%2F%2Fimg.yzcdn.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642831582&t=dabf2e0c00ac96029b914148fdde802d" alt="" width="358px" />
        <span>良品铺子</span>
      </van-grid-item>
    </van-grid>
    <van-row type="flex" justify="center" class="row">
      <van-col span="6">
        <p>行业排名</p>
        <span>125</span>
      </van-col>
      <van-col span="6">
        <p>NPS得分</p>
        <span>125</span>
      </van-col>
      <van-col span="6">
        <p>推荐人</p>
        <span>2658</span>
      </van-col>
      <van-col span="6" style="border: none">
        <p>助力值</p>
        <span>125</span>
      </van-col>
    </van-row>

    <van-icon name="add-square" />
    <span style="font-size: 14px">商家品牌介绍</span>

    <div class="one">
      <p>
        良品铺子股份有限公司最早是以实体店起家，2006年8月28日在武汉广场开出第一家门店。
        已整合门店、电商、第三方平台和移动端以及社交电商，开辟了线上线下37个全渠道,其中实体门店已达2100多家。
        加工过的槟榔; 鱼肉香肠; 炸薯条; 制汤料; 加工过的核桃; 五香卤蛋;
        天然或人造的香肠肠衣; 牛肉干; 水果干; 食用海藻提取物; 熟肉罐头
      </p>
      <p>
       良品铺子从第一家门店起步，坚持研发高品质的产品，不断引进先进的经营管理思想，打造公司不可超越不可模仿的产品竞争力；注重对员工的培训和内部提拔，鼓励员工和公司共同成长，建立了一支优秀年轻有活力的管理团队，现公司正以超乎人们想象的速度快速发展，成为人们关注的焦点。 
      </p>
      <p>
       良品铺子将以诚挚的信誉、热情的服务、严格的品控和开放的心态让您享受美味的同时，快乐感受健康生活。
      </p>
    </div>
    <van-icon name="add-square" />
    <span style="font-size: 14px">商家品牌介绍</span>
    <div class="two">
      <p>1、诚实守信依法经营，做到守法经营、诚信经营。</p>
      <p>2、合同规范公平竞争。做到童叟无欺、诚心经营。</p>
      <p>3、价格标识清晰明确。做到价格公道、诚实经营。</p>
    </div>
    <van-icon name="add-square" />
    <span style="font-size: 14px">商家品牌介绍</span>
    <div class="three">
      <span>五折优惠券</span>
    </div>
    <div class="bottom">
      <span>用户评分</span>
      <div class="foot">
        <van-row v-for="(item, index) in list" :key="index">
          <van-col span="4"
            ><van-image width="46" height="46" :src="item.src"
          /></van-col>
          <van-col span="20"
            ><p>{{ item.name }}为这个商户打了{{ item.score }}分</p>
            <p>2019-08-02 14:42:52</p>
          </van-col>
        </van-row>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        {
          src: "https://img01.yzcdn.cn/vant/cat.jpeg",
          name: "任同学",
          score: 8,
        },
        {
          src: "https://img01.yzcdn.cn/vant/cat.jpeg",
          name: "叶同学",
          score: 10,
        },
      ],
      tableData: [
        {
          name: "奈雪の茶",
          Popularity: "888",
          value: "98",
        },
        {
          name: "奈雪の茶",
          Popularity: "888",
          value: "98",
        },
        {
          name: "奈雪の茶",
          Popularity: "888",
          value: "98",
        },
        {
          name: "奈雪の茶",
          Popularity: "888",
          value: "98",
        },
      ],
    };
  },
  methods: {
    indexMethod(index) {
      return index;
    },
    click() {
      this.$router.push({ path: "/mouth" }).catch((error) => error);
    },
  },
};
</script>
<style scoped lang="less">
.whole {
  height: 100%;
  padding-top: 40px;
  .head {
    width: 100%;
    height: 51px;
    color: rgba(80, 80, 80, 1);
    background-color: rgba(239, 239, 239, 1);
    position: fixed;
    top: 0;
    z-index: 1;
  }
  /deep/.van-nav-bar .van-icon {
    color: rgba(153, 153, 153, 1);
  }
  /deep/.van-nav-bar__title {
    color: rgba(42, 131, 78, 1);
    font-size: 18px;
  }
  .van-grid {
    width: 358px;
    height: 184px;
    overflow: hidden;
    .van-grid-item {
      width: 358px;
      font-size: 16px;
      line-height: 150%;
      margin-top: 10px;
      margin-left: 8px;
      span {
        position: absolute;
        left: 17px;
        top: 136px;
        color: rgba(255, 255, 255, 1);
        text-shadow: rgba(0, 0, 0, 0.5) 0px 2px 2px;
        font-size: 23px;
      }
    }
  }

  .van-icon {
    margin-left: 14px;
    font-size: 14px;
  }

  .row {
    margin-top: 10px;
    justify-content: center;
    margin: -14px 13px;
    .van-col {
      border-right: 1px solid rgba(153, 153, 153, 1);
      margin: 20px 0;
      text-align: center;
      P {
        width: 70px;
        height: 21px;
        color: rgba(80, 80, 80, 1);
        font-size: 14px;
        margin-left: 12px;
        margin-bottom: 10px;
      }
      span {
        width: 35px;
        height: 21px;
        color: rgba(80, 80, 80, 1);
        font-size: 14px;
        text-align: center;
        font-weight: bold;
      }
    }
  }
  .one,
  .two,
  .three {
    font-size: 13px;
  }
  .one {
    p {
      margin: 10px 10px;
      padding: 8px;
    }
  }
  .two {
    p {
      margin: 4px 10px;
    }
  }
  .three {
    width: 346px;
    height: 77px;
    span {
      margin-top: 0;
      margin-left: 16px;
    }
  }
  .bottom {
    font-size: 14px;
    span {
      width: 100%;
      color: rgba(42, 131, 78, 1);
      margin-left: 16px;
      font-weight: bold;
    }
  }
}
.foot {
  .van-row {
    border-bottom: 1px solid rgba(229, 229, 229, 1);
    padding: 10px;
    .van-col {
      .van-image {
        margin-left: 10px;
      }

      p {
        margin: 8px;
        padding: 0;
      }
    }
  }
}
</style>

    